<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div
        {
            background-color: aliceblue;
            width: 50%;
            height: 100%;
            border: 2px dotted black;
            
            text-align: center;
            margin-top: 0px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

</head>
<body>
    <div>
        <input class="reset" type="button" value="重新开始" onclick="ReStart()"> <br>
        请输入1 ~ 100的数字: <input class="guessNum" type="text" name="num" value="0"> <input class="guess" type="button" value="猜" onclick="Guess()"><br>
        已经猜的次数: <span class="guessTime">0</span> <br>
        结果: <span class="result"></span>
    </div>
</body>

    <script>
        let _reset = document.querySelector(".reset");
        let _guessNum = document.querySelector(".guessNum");
        let _guess = document.querySelector(".guess");
        let _guessTime = document.querySelector(".guessTime");
        let _result = document.querySelector(".result");
        
        let _random = Math.floor(Math.random() * 100) + 1;
        // console.log(_random);

        // console.dir(_reset);
        // console.dir(_guessNum);
        // console.dir(_guess);
        // console.dir(_guessTime);
        // console.dir(_result);

        function ReStart()
        {
            _guessNum.value = "0";
            _guessTime.innerHTML = "0";
            _result.innerHTML = "";

            _random = Math.floor(Math.random() * 100) + 1;
            //console.log(_random);
        }

        function Guess()
        {
            let guessNum = parseInt(_guessNum.value);
            _guessTime.innerHTML = parseInt(_guessTime.innerHTML) + 1;
            
            if(guessNum < _random)
            {
                _result.innerHTML = "猜小了"
                _result.style.color = "red";
            }
            else if(guessNum > _random)
            {
                _result.innerHTML = "猜大了"
                _result.style.color = "red";
            }
            else
            {
                _result.innerHTML = "猜对了"
                _result.style.color = "green";
            }
        }

    </script>
</html>